<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>

</head>
<body>
    <div id="app">
        <h1>知识点1 v-if</h1>   
            <h3>v-if v-else-if v-else 它们中间是不能有任何其他标签对的</h3>
            <p>例子</p>
            <h3 v-if="order==0">我是第一排的</h3>
            <h3 v-else-if="order==1">我是不上不下的第二排</h3>
            <h3 v-else>第三排</h3>
            <br>
            <button @click="order=(++order)%3">toggle(切换)</button>

        <h1>知识点2 v-show</h1>
            <p>例子</p>
            <h3 v-show="visible">我是v-show的展示</h3>
            <h3 v-if="visible">我是v-if的展示</h3>
            <button @click="visible=!visible">显示/隐藏</button>
            <h4>v-show是通过添加样式来实现隐藏的，但v-if是通过删除标签对来实现的
                通常情况下，只是单纯的隐藏，so用v-show
            </h4>
            
        <!-- <h1>课堂练习</h1>
            <h3>通过按钮单击事件实现不同用户身份显示不同的前端页面</h3>
            <input type="radio" value="学生" v-model="users">adminA
            <input type="radio" value="教师" v-model="users">adminB
            <input type="radio" value="领导" v-model="users">adminC
            <br>
            <div v-if="users=='教师'">
                {{users}}欢迎你！
                <button>管理</button>
            </div>
            <div v-else-if="users=='学生'">
                {{users}}欢迎你！
                <button>上课</button>
            </div>
            <div v-else="users=='领导'">
                {{users}}欢迎你！
                <button>视察</button>
            </div> -->

        <h1>练习：选择登录方式：微信，QQ，手机，邮箱</h1>
            <h3>请选择登录类型</h3>
            <input type="radio" value="qq" v-model="users">QQ登录
            <input type="radio" value="tel" v-model="users">手机登录
            <input type="radio" value="email" v-model="users">邮箱登录
            <br>

            <div v-if="users=='qq'">
                <h1>QQ登录</h1><br>
                QQ号：<input type="text"><br>
                密&nbsp;&nbsp;码：<input type="password"><br>
                <button @click="submit">登录</button>
            </div>
            <div v-else-if="users=='tel'">
                <h1>手机登录</h1><br>
                手机号：<input type="tel"><br>
                验证码：<input type="password"><br>
                <button @click="submit">登录</button>
            </div>
            <div v-else="users=='email'">
                <h1>邮箱登录</h1><br>
                邮箱号：<input type="text"><br>
                密&nbsp;&nbsp;&nbsp;码：<input type="password"><br>
                <button @click="submit">登录</button>
            </div>

            

    </div>
</body>
</html>

<script>
    const appConn = Vue.createApp({
        data() {
            return {
                order:0,
                visible:true,
                users:'qq',
                submit:''
            }
        },
    }).mount("#app")

</script>